import { useEffect, useState } from "react";
import { connect } from "dva";
import ProductList from "../components/ProductList";

const Products = (props) => {
  const { products, deleteProduct, loading } = props;
  const isLoading = loading.effects["products/query"];
  console.log("🚀 ~ Products ~ isLoading:", isLoading);
  const { lists } = products;
  console.log("🚀 ~ Products ~ lists:", lists);
  return (
    <>
      <h2>List of Products</h2>
      <ProductList
        onDelete={deleteProduct}
        products={lists}
        loading={isLoading}
      />
    </>
  );
};

const mapStateToProps = (state) => {
  console.log("🚀 ~ mapStateToProps ~ state:", state);
  return {
    products: state.products,
    loading: state.loading,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    deleteProduct: (id) => {
      dispatch({ type: "products/delete", id });
    },
    initData: () => {
      dispatch({ type: "products/query" });
    },
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Products);
